<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .head {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imglist {
            position: absolute;
            width: 2600px;
            height: 280px;
            left: 0px;
        }

        .imglist img {
            float: left;
        }
    </style>
</head>

<body>
    <div class="head">
        <div class="imglist">
            <img src="./image/1t.png">
            <img src="./image/2t.png">
            <img src="./image/3t.png">
            <img src="./image/4t.png">
            <img src="./image/5t.png">
        </div>
    </div>
    <script>
        let imglist = document.querySelector(".imglist");
        let page = 1;
        function autoPlay() {
            setInterval(function () {
                move(imglist, -520 * page, "left", function () {
                    page++;
                    if (page == 6) {
                        page = 1
                        imglist.style.left = "0px"
                    }
                })
            }, 1000)
        }
        autoPlay()
        cloneone()
        function cloneone() {
            let firstp = imglist.firstElementChild.cloneNode(true)
            imglist.style.width = "3120px"
            imglist.appendChild(firstp)
        }
        function move(ele, target, dir, cb) {
            function fn() {
                let num = parseInt(getComputedStyle(ele)[dir])
                let speed = target < num ? -10 : 10;
                if (num == target) {
                    cb && cb()
                } else {
                    num += speed;
                    ele.style[dir] = num + "px"
                    requestAnimationFrame(fn);
                }
            }
            fn()
        }
    </script>
</body>

</html>